JavaScript实现无缝轮播图效果 |
您所在的位置：网站首页 › js 无向图 › JavaScript实现无缝轮播图效果 |
JavaScript实现无缝轮播图效果
|
通过原生js实现无缝轮播效果。 思路： 1.利用html+css完成轮播图片，按钮，底部小点的整体效果的布局。 2.通过原生js完成图片轮播，无缝自动切换，底部小点随图片切换而切换。 步骤1： 建立无缝轮播的HTML的基本布局 html部分： 
html代码中分为个部分： 1.图片部分。 2.小点部分，这里用的是span标签，也可以用其他标签，能实现小点效果就行。 3.箭头部分。 步骤2： css部分 /* 主体部分 */ *{ margin: 0; padding: 0; list-style: none; } img{ width: 680px; height: 340px; } #slider{ position: relative; width: 680px; height: 340px; margin: 100px auto; /* outline: 2px solid red; */ overflow: hidden; } .slider-list{ display: flex; position: relative; left: 0px; width: 100%; height: 100%; /* transform: translateX(-680px); */ transition: all 1s; } .slider-list li{ width: 680px; height: 340px; } /* 小点部分 */ .dot-list{ position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 12px; background-color: rgba(255, 255, 255, .3); } .dot-list .dot{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: white; } .dot-list .dot.cur{ background-color: red; } /*箭头部分 */ .arraw{ position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 60px; background-color: rgba(0, 0, 0, 0.795); display: none; } .prev{ left: 0; } .next{ right: 0; } .arraw span{ position: absolute; top: 50%; left: 50%; transform: translate(50%,50%); width: 10px; height: 10px; border-bottom:2px solid white; border-left:2px solid white; } .prev span{ transform: translate(-50%,-50%) rotate(45deg); } .next span{ transform: translate(-50%,-50%) rotate(-135deg); } #slider:hover .arraw{ display: block; }完成html+css代码后，效果图如下：
注意这里的效果图为了方便演示，取消了css代码中.arraw{ display: none;}。 步骤3： 通过原生js实现自动无缝轮播效果 js代码： var slid =document.getElementById('slider'); var slidLis=slid.getElementsByTagName('ul')[0]; // var slidLis=document.querySelector(".slider-list") var slidLi=slidLis.getElementsByTagName('li'); var lef = document.getElementById('left'); var righ = document.getElementById('right'); var index = 0; function lun(){ index++; circe(); slidLis.style.left=index*-680 + "px"; slidLis.style.transition="all 1s"; if(index === 5){ index= 0; setTimeout(function(){ slidLis.style.left=0; slidLis.style.transition="none"; },1000) } circe(); } righ.addEventListener("click",lun); lef.addEventListener("click",function(){ index--; if(index === -1){ slidLis.style.left=5*-680 + "px"; slidLis.style.transition="none"; index = 4; setTimeout(function(){ slidLis.style.left=index*-680 + "px"; slidLis.style.transition="all 1s"; },0); }else{ slidLis.style.left=index*-680 + "px"; } circe(); }); // 自动轮播 var autoplay = setInterval(lun,2000); slid.addEventListener("mouseenter",function(){ clearInterval(autoplay); }); slid.addEventListener("mouseleave",function(){ clearInterval; autoplay = setInterval(lun,2000); }) //小圆点 var dotList = document.getElementsByTagName('span'); function circe(){ for(var i = 0;i < dotList.length;i++){ if(i === index){ dotList[i].classList.add("cur"); }else{ dotList[i].classList.remove("cur"); } } }效果如下： 以上无缝轮播的难点主要是：当从最后一张图片切换到第一张图片，过渡效果的处理。 上面代码是通过在html代码上，在最后一张图片后在增加一张与第一张相同的图片（假的第一张图片），当轮播要从最后一张切换到第一张时，实则先过渡到我们设的假的第一张图片，然后在过渡结束后立刻切换真正的第一张。这里的我们需要设置一个setTimeout();时间为我们设置的过渡时间一样，因为我们需要等待过渡结束时，在设置transition:"none";。 |
【本文地址】